<template>
  <div class="menu">
    <el-menu :default-active="active" class="el-menu-vertical-demo" :collapse="width<1000">
      <el-menu-item
        v-for="menu in noChildren"
        :key="menu.index"
        :index="menu.path"
        @click="changeClick(menu)"
      >
        <i :class="menu.icon"></i>
        <span>{{ menu.title }}</span>
      </el-menu-item>
      <!-- 二级菜单 -->
      <!-- <el-submenu
        v-for="item in hasChildren"
        :key="item.index"
        :index="item.index"
      >
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item-group
          v-for="sunItem in item.children"
          :key="sunItem.index"
        >
          <el-menu-item index="1-1">{{ sunItem.title }}</el-menu-item>
        </el-menu-item-group>
      </el-submenu> -->
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: "测试",
      width: window.screen.width,


      menuList: [
        {
          icon: "el-icon-location",
          index: "1",
          title: "员工管理",
          path: "/home/staffManagement",
        },
        {
          icon: "el-icon-menu",
          index: "2",
          title: "仓库管理",
          path: "/home/warehouseManagement",
        },
        {
          icon: "el-icon-document",
          index: "3",
          title: "员工工作",
          path: "/home/employeeWork",
        },
        {
          icon: "el-icon-setting",
          index: "4",
          title: "工资计算",
          path: "/home/salaryCalculation",
        },
      ],
      active:'1'
    };
  },
  computed: {
    // 没有子菜单
    noChildren() {
      return this.menuList.filter((item) => !item.children);
    },
    // 有子菜单
    hasChildren() {
      return this.menuList.filter((item) => item.children);
    },
  },
  methods: {
    changeClick(val) {
      if (this.$route.path !== val.path) {
        this.$router.push({
          path: val.path,
        });
      }
    },
  },
  mounted() {
    console.log(this.$route.path);
    this.active = this.$route.path;
  }
};
</script>
<style lang="scss" scoped>
.menu {
  height: calc(100vh - 96px);
  .el-menu {
    height: 100%;
  }
}
</style>
